<template>
  <div class="wave">
    <TipsView :icon="Tipsicon" :text="Tipstext" ref="childTips"></TipsView>
    <Reply :userdata="userItem" ref="reply" @articleEvent="handerReply"></Reply>
    <div class="waveitem">
      <header class="wave-top">
        <div class="wave-top-left">
          <div class="avatar" @click="handerRoute">
            <div class="user-avatar">
              <img :src="dataObj.avatar" alt="" />
            </div>
            <!-- <div class="user-flag">
              <img src="/red-v.png" alt="" />
            </div> -->
          </div>
          <div class="information">
            <div class="information-box">
              <div class="information-title">
                <h3 @click="handerRoute">{{ dataObj.username }}</h3>
              </div>
              <div class="information-specific">
                <span class="time">{{ dataObj.times }}</span>
                <span class="lable">{{ dataObj.lable }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- user.uid!==data.uid判断当前是否属于登录用户的发布文章 -->
        <div class="wave-top-right">
          <div v-if="showFollow && user.uid !== data.uid">
            <button
              class="wave-top-right-followed"
              v-if="dataObj.isfollow"
              disabled="disabled"
            >
              <i class="iconfont icon-duigoux"></i>
              <span>已关注</span>
            </button>
            <button
              class="wave-top-right-follow"
              v-else
              @click.stop="handerFollow"
            >
              <i class="iconfont icon-jiahao1"></i>
              <span>关注</span>
            </button>
          </div>
          <!-- user.isUser 未登录时，不显示更多操作-->
          <div
            class="wave-top-right-more"
            v-if="user.isUser"
            @click.stop="moreShow()"
          >
            <i class="iconfont icon-xiajiantou" title="更多"></i>
            <div class="more-info" v-if="more">
              <div class="info-box">
                <div class="close">
                  <i
                    class="iconfont icon-guanbi"
                    title="关闭"
                    @click.stop="moreClose()"
                  ></i>
                </div>
                <div class="more-list" v-if="Moreoptions">
                  <div
                    class="more-item"
                    v-if="delState"
                    @click.stop="handerCollect"
                  >
                    {{ Moreoptions.collect.length > 0 ? "取消收藏" : "收藏" }}
                  </div>
                  <div
                    class="more-item"
                    v-if="delState"
                    @click.stop="handerFollow"
                  >
                    {{ Moreoptions.follow.length > 0 ? "取消关注" : "关注" }}
                  </div>
                  <!-- <div class="more-item" v-if="delState">举报</div> -->
                  <div
                    class="more-item"
                    @click="
                      handerState(dataObj.cid, Moreoptions.stateBox[0].state)
                    "
                    v-if="!delState && Moreoptions.stateBox[0].state === 0"
                  >
                    设为隐私
                  </div>
                  <div
                    class="more-item"
                    @click="
                      handerState(dataObj.cid, Moreoptions.stateBox[0].state)
                    "
                    v-if="!delState && Moreoptions.stateBox[0].state === 1"
                  >
                    设为公开
                  </div>
                  <div
                    class="more-item"
                    v-if="!delState"
                    @click="handerDel(dataObj.cid)"
                  >
                    删除
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
      <article>
        <div class="wave-content">
          <div
            class="wave-text"
            v-html="$utils.parsingEmoji(data.content)"
          ></div>
          <!-- 这是图片组件 -->
          <PicItem
            v-if="data.istype === 1"
            :Picdata="dataObj.pic_list"
          ></PicItem>
          <!-- 这是视频组件 -->
          <VideoItem
            v-else-if="data.istype === 2"
            :Videodata="dataObj.videos"
            :CId="dataObj.cid"
          ></VideoItem>
        </div>
      </article>
      <footer class="wave-footer">
        <div class="footer-item">
          <div class="item-box" @click.stop="handerCopy(data.cid, data.uid)">
            <i class="iconfont icon-31zhuanfa"></i> <span></span>
          </div>
        </div>
        <div class="footer-item">
          <div
            class="item-box"
            v-if="!moreComment"
            @click="handerComment(data.cid, 'list')"
          >
            <i
              :class="
                isComment
                  ? 'iconfont comment-active icon-xiaoxi'
                  : 'iconfont icon-xiaoxi'
              "
            ></i>
            <span :class="isComment ? 'comment-active' : ''">{{
              data.comment_total == 0 ? "评论" : data.comment_total
            }}</span>
            <!-- 点击显示评论  -->
          </div>
          <div class="item-box" v-else @click="handerComment(data.cid, 'more')">
            <i class="iconfont comment-active icon-xiaoxi"></i>
            <span class="comment-active">{{
              data.comment_total == 0 ? "评论" : data.comment_total
            }}</span>
            <!-- 点击显示评论  -->
          </div>
        </div>
        <div class="footer-item">
          <div class="item-box">
            <i
              @click="handerFabulous"
              :class="
                data.isfabul
                  ? 'iconfont  icons icon-dianzan_kuai active_isfabul'
                  : 'iconfont  icon-dianzan'
              "
            ></i>
            <span :class="data.isfabul ? 'active_isfabul' : ''">{{
              data.fabulous_total === 0 ? "" : data.fabulous_total
            }}</span>
          </div>
        </div>
      </footer>
      <!-- 评论部分 -->
      <div v-if="isComment" class="comment">
        <!-- 发表评论 -->
        <div class="publish-box">
          <div class="publish-top">
            <div class="publish-avatar">
              <img :src="user.avatar" alt="" />
            </div>
            <div class="publish-from">
              <div class="input-box">
                <textarea
                  rows="1"
                  class="input-info"
                  placeholder="发布你的评论"
                  v-focus
                  :key="forceUpdateKey"
                  v-model="ArticleCommentText"
                  ref="comment_input"
                />
              </div>
            </div>
          </div>
          <div class="publish-bt">
            <div class="bt-left">
              <span class="EmotionButton" @click="OpenEmotions()">
                <i class="iconfont icon-biaoqing IconfontSize"></i>
              </span>
              <Emo ref="EmotionB" @AppendInputValue="AppendMessageText" />
            </div>
            <div class="bt-right">
              <div class="right-button">
                <button ref="commentButtn" @click="submitComment(data.uid)">
                  评论
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- 评论列表 -->
        <div class="comment-box" v-if="commentList.length > 0">
          <div class="comment-herder">
            <span
              :class="getState ? 'active-span' : ''"
              @click="getComment('time')"
              >按时间</span
            >
            <span
              :class="getState ? '' : 'active-span'"
              @click="getComment('hot')"
              >按热度</span
            >
          </div>
          <div class="comment-content">
            <div class="content-list">
              <div
                class="comment-item"
                v-for="(item, index) in commentList"
                :key="item.pid"
              >
                <div class="comment-one">
                  <div class="comment-one-avatar">
                    <img :src="item.avatar" alt="" />
                  </div>
                  <div class="comment-one-right">
                    <div class="comment-one-right-top">
                      <div class="news">

                          <span class="news-username" > {{ item.username }}</span>:

                        <span
                          class="news-text"
                          v-html="$utils.parsingEmoji(item.content)"

                        ></span>
                      </div>
                    </div>
                    <div class="comment-one-right-bt">
                      <div class="information">
                        <div class="create-time">
                          {{ item.create_time }}
                        </div>
                        <div class=""></div>
                      </div>
                      <div class="operation">
                        <!--点击显示评论回复弹窗  -->
                        <span
                          @click="
                            showPopUp(
                              item.uid,
                              item.username,
                              data.cid,
                              item.pid,
                              index
                            )
                          "
                        >
                          <i class="iconfont icon icon-xiaoxi"></i
                        ></span>
                        <span>
                          <i
                            @click="getcommentfab(item.pid, index)"
                            :class="
                              item.article_fab_state==1
                                ? 'iconfont icon  icon-dianzan_kuai active'
                                : 'iconfont icon icon-dianzan'
                            "
                          ></i
                          ><span class="fab_num" :style="item.article_fab_state==1?'color:#f60':''">{{
                            +item.fab_num === 0 ? "" : item.fab_num
                          }}</span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="comment-two">
                  <div v-if="item.replyState" class="comment-two-reply">
                    <div class="comment-two-reply-list" v-for="(data,i) in item.replyList" :key="data.rep_cid">
                      <div class="comment-two-text">
                        <span class="two-text-username">{{data.user_name}}</span>
                        <span v-if="data.user_name!==data.un_user_name">回复</span>
                        <span class="two-text-un-username" v-if="data.user_name!==data.un_user_name">@{{data.un_user_name}}</span>:
                        <span
                         v-html="$utils.parsingEmoji(data.rep_content)" ></span
                        >
                      </div>
                      <div class="comment-two-bottom">
                        <div class="comment-two-information">
                        <div class="comment-two-information-left" style="color:#999">
                          <span>{{data.rep_create_time}}</span>
                          <!-- <span>来自山东</span> -->
                        </div>
                         <div class="comment-two-information-right">
                        <span @click="
                            showPopUp(
                              data.user_id,
                              data.user_name,
                              data.rep_arc_id,
                              item.pid,
                              index
                            )
                          "><i class="iconfont icon-xiaoxi"></i></span>
                        <span
                          ><i :class=" data.rep_art_state==1? 'iconfont icon-dianzan1':'iconfont icon-dianzan'"
                          :style="data.rep_art_state==1? 'cursor: pointer;color:#f60':'cursor: pointer'"
                           @click="handerFabArtTwo(data.rep_cid,item.pid,index,i)"></i
                          ><span class="rep_fab_num" :style="data.rep_art_state==1? 'color:#f60':''">{{data.rep_fab_num>0? data.rep_fab_num:''}}</span></span
                        >
                      </div>
                      </div>

                      </div>

                    </div>
                  </div>
                  <div class="comment-two-more">
                    <span
                      v-if="!item.replyState && item.reply_count !== 0"
                      @click="handerExhibition(item.pid, index)"
                      >展开{{ item.reply_count }}条回复</span
                    >
                    <span v-if="item.replyState && item.reply_count !== item.replyList.length" @click="handerExhibition(item.pid, index)">查看更多评论</span>
                    <span
                      v-if="
                        item.replyState &&
                        item.reply_count === item.replyList.length
                      "
                      >没有更多评论了</span
                    >
                    <span
                      v-if="item.replyState"
                      @click="item.replyState = false"
                      >收起</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="comment-more">
            <div class="more">
              <span @click.stop="showInfo"
                >查看全部{{
                  data.comment_total == 0 ? "" : data.comment_total
                }}评论<i class="iconfont icon-youjiantou"></i
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VideoItem from './videoItem.vue'
import PicItem from './picItemView.vue'
import TipsView from '@/components/utilView/tipView.vue'
import Emo from '@/components/utilView/emoView.vue'
import Reply from '@/components/utilView/replyView.vue'
import http from '../../util/http'
import times from '@/util/times'
import { mapState, mapMutations } from 'vuex'
export default {
  components: {
    VideoItem,
    PicItem,
    TipsView,
    Emo,
    Reply
  },

  props: {
    dataObj: {
      type: Object,
      default: null
    },
    // 显示评论
    moreComment: {
      type: Boolean,
      default: false
    },

    // 显示关注和未关注按钮
    showFollow: {
      type: Boolean,
      default: true
    },
    // 个人页面隐藏waveItem组件的关注等按钮，显示删除按钮的控制变量
    // 默认为真，显示关注，收藏等按钮
    delState: {
      type: Boolean,
      default: true
    },
    Index: {
      type: Number,
      default: NaN
    }
  },
  data () {
    return {
      data: this.dataObj,
      more: false, // 显示更多的变量
      Tipsicon: 'icon-duigoux',
      Tipstext: '删除成功',
      isComment: false, // 显示评论部分
      ArticleCommentText: '', // 评论内容
      getState: true, // 评论获取数据的状态
      commentList: [], // 评论数据
      Moreoptions: {
        collect: [],
        follow: []
      }, // 更多选项状态
      page: 1, // 评论页码
      forceUpdateKey: 0,
      userItem: {
        // 回复内容的数据
        nid: NaN, // 被回复的评论的用户的id
        username: '', //
        pid: NaN, // 被回复的评论id
        typeid: NaN, // 文章或者视频的id
        type: 'article' // 文章或者视频的类型
      }
    }
  },
  mounted () {
    this.isComment = this.moreComment
  },

  computed: {
    ...mapState(['user', 'delArtcleState']),
    // 触发删除文章
    delArtcle () {
      return this.delArtcleState
    }
  },
  watch: {
    delArtcle () {
      // 触发子传父的方法
      this.handerDelBefore()
    },
    // 监听是否有内容输入了评论框，有内容改变样式
    ArticleCommentText (newVal, oldVal) {
      if (newVal !== '') {
        this.$refs.commentButtn.style.background = '#f60'
      } else if (newVal === '') {
        this.$refs.commentButtn.style.background = 'rgb(255, 158, 93)'
      }
      if (oldVal === newVal) {
        return
      }
      this.ArticleCommentText = newVal
      this.forceUpdateKey += 0
      this.changeTextareaHeight()
      this.$nextTick(() => {
        this.$refs.comment_input.focus()
      })
    },

    dataObj: {
      deep: true,
      handler () {
        this.data = this.dataObj
      }
    }
  },

  methods: {
    ...mapMutations(['meshowConsider', 'handerConsiderData']),
    // websoket的消息提醒的回调函数
    getConfigResult (message) {
      console.log(message)
    },
    // 关注成功提示 点击赞成功提示 // 提示信息
    // tipsMethod
    tipsMethod (text, icon) {
      this.$refs.childTips.HanderTiming(1200)
      this.Tipstext = text
      this.Tipsicon = icon
    },
    // 跳转到个人主页
    handerRoute () {
      if (this.user.uid === this.data.uid) {
        this.$router.push({ path: '/user/myhome' })
      } else {
        this.$router.push({
          path: '/home/userHome',
          query: { uuid: this.data.uid }
        })
      }
    },
    // 评论输入框高度
    changeTextareaHeight () {
      const _this = this
      this.$nextTick(() => {
        const textarea = _this.$refs.comment_input
        const scrollHeight = textarea.scrollHeight // 控件所有的高度，包含滚动的那部分(不可见也会有高度)
        const height = textarea.offsetHeight // 屏幕上显示的高度
        if (height <= scrollHeight) {
          textarea.style.height = 'auto' // 恢复默认值，这个作用就是根据内容自适应textarea高度
          textarea.style.height = textarea.scrollHeight + 'px' // 拿到最新的高度改变textarea的高度
        }
      })
    },
    // 复制链接，旧版浏览器的方法
    fallbackCopyTextToClipboard (text) {
      // 1.创建一个可选中元素
      const textArea = document.createElement('textarea')
      textArea.value = text
      // 2.使用定位，阻止页面滚动
      textArea.style.top = '0'
      textArea.style.left = '0'
      textArea.style.position = 'fixed'
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      try {
        const successful = document.execCommand('copy')
        const msg = successful ? '复制成功' : '复制失败'

        console.log(msg)
      } catch (err) {
        console.error('Fallback: Oops, unable to copy', err)
      }
      // 3.移除元素
      document.body.removeChild(textArea)
    },
    // 新版复制链接的方法
    copyTextToClipboard (text) {
      if (!navigator.clipboard) {
        this.fallbackCopyTextToClipboard(text)
        return
      }
      navigator.clipboard.writeText(text).then(
        () => {
          console.log(this)
          this.tipsMethod('复制链接成功', this.Tipsicon)
          console.log('复制链接成功')
        },
        function (err) {
          console.error('Async: Could not copy text: ', err)
        }
      )
    },
    // 复制链接
    handerCopy (cid, uid) {
      // copy http://localhost:8080/#/home/articleDetail?uid=18&cid=71
      this.copyTextToClipboard(
        `http://localhost:8080/#/home/articleDetail?uid=${uid}&cid=${cid}`
      )
    },

    // 点击显示评论区
    handerComment (cid, type) {
      if (type === 'list') {
        this.isComment = !this.isComment
        console.log('list')
        if (this.isComment) {
          // console.log('获取数据') 获取评论数据
          http.getComments(cid, this.user.uid, this.page, 'time').then((res) => {
            console.log(res.data)
            this.commentList = res.data.data
          })
        }
        if (this.isComment) {
          this.$nextTick(() => {
            this.$refs.comment_input.focus()
          })
        }
      } else if (type === 'more') {
        // console.log('获取数据')
        http.getComments(cid, this.user.uid, this.page, 'hot').then((res) => {
          console.log(res.data)
          this.commentList = res.data.data
        })

        if (this.isComment) {
          this.$nextTick(() => {
            this.$refs.comment_input.focus()
          })
        }
      }
    },

    // 查询收藏状态
    moreShow () {
      if (!this.more) {
        http
          .articleState(this.user.uid, this.data.uid, this.data.cid)
          .then((res) => {
            console.log(res.data)
            this.Moreoptions = res.data.data
            this.more = !this.more
          })
        //   // console.log(this.user.uid, this.data.uid, this.data.cid)
      } else {
        this.more = false
      }
    },
    // 关闭更多选项
    moreClose () {
      this.more = false
    },
    // 点击关注
    handerFollow () {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      const uid = this.user.uid // 登录用户id
      const nid = this.data.uid // 文章用户id
      const followdata = 1
      // console.log('点击关注')
      if (this.Moreoptions && this.Moreoptions.follow.length > 0) {
        http.delfollow(this.Moreoptions.follow[0].fid).then(async (res) => {
          // console.log(res.data)
          if (res.data.ok === 1) {
            // console.log(res.data.message)
            // 提示信息 成功
            await this.tipsMethod(res.data.message, this.Tipsicon)
            // 交替关注或已关注
            this.data.isfollow = false
          } else if (res.data.ok === 0) {
            // 提示信息 失败
            this.tipsMethod(res.data.message)
          }
          // 关闭更多操作框
          this.more = false
        })
      } else {
        http.getfollow(uid, nid, followdata).then(async (res) => {
          // console.log(res.data)
          if (res.data.ok === 1) {
            // console.log(res.data.message)
            // 提示信息 成功
            await this.tipsMethod(res.data.message, this.Tipsicon)
            // 交替关注或已关注
            this.data.isfollow = true
          } else if (res.data.ok === 0) {
            // 提示信息 失败
            this.tipsMethod(res.data.message)
          }
          // 关闭更多操作框
          this.more = false
        })
      }
    },

    // 点击点赞文章
    handerFabulous () {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      const uid = this.user.uid // 登录用户id
      const cid = this.data.cid // 文章id
      const aid = this.data.uid // 文章作者的id
      // console.log(this.data.isfabul)
      // 判断是否点赞
      // 已经点赞过，此时取消点赞
      if (this.data.isfabul) {
        http.remFabulous(uid, cid).then((res) => {
          if (res.data.ok === 1) {
            console.log(res.data)
            // 提示信息
            this.tipsMethod(res.data.message, this.Tipsicon)
            this.data.isfabul = false
            this.data.fabulous_total = this.data.fabulous_total - 1
          }
        })
      } else {
        // 未点赞过，此时进行点赞
        http.getFabulous(uid, cid, aid).then((res) => {
          console.log(res.data)
          if (res.data.ok === 1) {
            // 提示信息
            this.tipsMethod(res.data.message, this.Tipsicon)
            this.data.isfabul = true
            this.data.fabulous_total = this.data.fabulous_total + 1
            // 即时通信通知
            // getConfigResult 是通知发送后的回调函数
            const { SingleFab } = this.$socket.webSocketType
            this.$socket.sendSock({ type: SingleFab, data: 1, id: aid }, this.getConfigResult)
          }
        })
      }
    },

    // 打开表情包弹框
    OpenEmotions () {
      this.$refs.EmotionB.OpenEmotion(true)
    },
    // 表情选中后追加在input
    AppendMessageText (EmotionChinese) {
      this.ArticleCommentText += EmotionChinese
    },
    // 选择不同的评论排序
    getComment (val) {
      if (val === 'time') {
        this.getState = true
        http.getComments(this.data.cid, this.user.uid, this.page, val).then((res) => {
          console.log(res.data)
          this.commentList = res.data.data
        })
      } else if (val === 'hot') {
        this.getState = false
        http.getComments(this.data.cid, this.user.uid, this.page, val).then((res) => {
          console.log(res.data)
          this.commentList = res.data.data
        })
      }
    },
    // 提交评论内容到后端
    submitComment (nid) {
      // nid该文章发布者的id
      // 校验登录

      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      const comment = this.ArticleCommentText
      if (comment === '') {
        return
      }
      http.subComment(this.user.uid, this.data.cid, comment).then((res) => {
        console.log(res.data)
        if (+res.data.ok === 1) {
          http.getComments(this.data.cid, this.user.uid, this.page, 'time').then((res) => {
            console.log(res.data)
            this.commentList = res.data.data
          })
          // 提示信息
          this.tipsMethod(res.data.message, this.Tipsicon)
          this.ArticleCommentText = ''
          // 即时通信通知
          // getConfigResult 是通知发送后的回调函数
          const { SingleCom } = this.$socket.webSocketType
          this.$socket.sendSock({ type: SingleCom, data: 1, id: nid }, this.getConfigResult)
        }
      })
    },
    // 详情页跳转
    showInfo () {
      this.$router.push({
        path: '/home/articleDetail',
        query: { uid: this.data.uid, cid: this.data.cid }
      })
      console.log(this.data.uid, this.data.cid)
    },
    // 添加收藏 或者取消收藏
    handerCollect () {
      if (this.Moreoptions && this.Moreoptions.collect.length > 0) {
        http.delCollect(this.Moreoptions.collect[0].col_id).then((res) => {
          // 提示信息
          if (res.data.ok === 1) {
            this.tipsMethod(res.data.message, this.Tipsicon)
          } else if (res.data.ok === 0) {
            this.tipsMethod(res.data.message)
          }
          // 关闭更多操作框
          this.more = false
        })
      } else {
        http.getCollect(this.user.uid, this.data.cid).then((res) => {
          // 提示信息
          if (res.data.ok === 1) {
            this.tipsMethod(res.data.message, this.Tipsicon)
          } else if (res.data.ok === 0) {
            this.tipsMethod(res.data.message)
          }
          // 关闭更多操作框
          this.more = false
        })
      }
    },
    // 点赞评论内容
    getcommentfab (pid, index) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      http.getfabcomment(this.user.uid, pid, this.dataObj.cid).then((res) => {
        if (+res.data.ok === 1 && res.data.message === '点赞成功') {
          this.commentList[index].fab_num++
          this.commentList[index].article_fab_state = 1
        } else if (+res.data.ok === 1 && res.data.message === '取消点赞') {
          this.commentList[index].fab_num--
          this.commentList[index].article_fab_state = null
        }
        console.log(res.data)
      })
    },
    // 更改文章的展示状态
    handerState (cid, state) {
      if (+state === 0) {
        // 将公开改为及自己可见
        http.EditPostStatus(cid, 1).then((res) => {
          // 修改成功
          if (res.data.ok === 1) {
            this.tipsMethod(res.data.message, this.Tipsicon)
          } else if (res.data.ok === 0) {
            this.tipsMethod(res.data.message)
          }
        })
      } else if (+state === 1) {
        // 将尽自己可见改为公开
        http.EditPostStatus(cid, 0).then((res) => {
          if (+res.data.ok === 1) {
            this.tipsMethod(res.data.message, this.Tipsicon)
          } else if (+res.data.ok === 0) {
            this.tipsMethod(res.data.message)
          }
        })
      }
    },
    // 删除文章
    handerDel (cid) {
      this.meshowConsider(true)
      this.handerConsiderData({ title: '删除文章', text: '是否删除文章？', type: 'delartcle', cid: cid })
    },
    // 删除成功之后
    handerDelBefore () {
      this.$emit('successDel', { index: this.Index })
    },
    // 点击显示评论回复弹窗 进行评论回复
    showPopUp (uid, username, cid, pid, index) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      // 传递参数
      this.userItem.nid = uid // 被回复的评论的用户的id
      this.userItem.pid = pid //
      this.userItem.username = username //
      this.userItem.typeid = cid //

      this.userItem.index = index ///
      console.log(uid)
      // 父组件调用子组件的方法，让回复组件显现
      this.$refs.reply.PopUp()
    },
    // 子传父
    handerReply (data) {
      const { index, pid } = data
      // // 发布后
      this.commentList[index].replyPage = 1
      // 调用获取回复评论数据的方法
      this.getReplyList(pid, index, true)
    },
    // 展开列表
    handerExhibition (pid, index) {
      // console.log('需要展开评论的评论内容', this.commentList, index)
      // 调用获取回复评论数据的方法
      this.getReplyList(pid, index)
    },
    // 获取回复数据的方法
    getReplyList (pid, index, state = false) {
      const { replyPage } = this.commentList[index]
      http.getArcList(replyPage, pid, 5, this.dataObj.cid, this.user.uid).then((res) => {
        console.log(res.data)
        if (+res.data.ok === 1) {
          if (state) {
            this.commentList[index].replyList = []
          }
          this.commentList[index].replyList = [...this.commentList[index].replyList, ...res.data.reply_list]
          this.commentList[index].replyState = true
          this.commentList[index].replyPage = this.commentList[index].replyPage + 1
        }
      })
    },
    // 点赞·文章二级评论
    handerFabArtTwo (repId, pid, index, i) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      // 二级评论id  一级父评论id
      http.appendArtReply(this.dataObj.cid, this.user.uid, repId, pid).then(res => {
        console.log(res.data)
        console.log(index, i)
        if (+res.data.ok === 1 && res.data.message === '点赞成功') {
          this.commentList[index].replyList[i].rep_art_state = 1
          this.commentList[index].replyList[i].rep_fab_num++
        }
        if (+res.data.ok === 1 && res.data.message === '取消点赞') {
          this.commentList[index].replyList[i].rep_art_state = null
          this.commentList[index].replyList[i].rep_fab_num--
        }
      })
    }
  },
  // 自定义指令
  directives: {
    focus: {
      mounted (el) {
        el.onfocus = function () {
          el.className = 'input-active input-info '
        }
        el.onblur = function () {
          el.className = 'input-info'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@use "@/styles/init.scss" as h;

.wave {
  width: 100%;
  border-radius: 5px;
  background: h.$color;

  min-height: 100px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(247, 247, 247);
  .waveitem {
    padding: 20px;
    .wave-top {
      display: flex;
      justify-content: space-between;
      .wave-top-left {
        display: flex;
        .avatar {
          width: 50px;
          height: 50px;
          display: block;
          position: relative;
          .user-avatar {
            width: 100%;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              cursor: pointer;
              &:hover {
                filter: brightness(80%);
              }
            }
          }
          .user-flag {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            display: block;
            overflow: hidden;
            position: absolute;
            bottom: 0;
            right: 0;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
        .information {
          margin-left: 10px;
          display: flex;

          flex-direction: column;
          justify-content: center;
          .information-box {
            display: block;
            .information-title {
              font-size: 14px;
              font-weight: bold;
              margin-bottom: 5px;
              cursor: pointer;
              &:hover {
                color: #f60;
              }
            }
            .information-specific {
              font-size: 12px;
              color: h.$title-three-color;
              .lable {
                margin-left: 10px;
              }
            }
          }
        }
      }

      .wave-top-right {
        display: flex;
        .wave-top-right-followed {
          font-size: 12px;
          display: block;
          width: 60px;
          height: 28px;
          border-radius: 15px;
          border: 1px solid #999;
          background: h.$color;
          color: #999;
          margin-top: 10px;
          cursor: not-allowed;
        }
        .wave-top-right-follow {
          font-size: 12px;
          display: block;
          width: 60px;
          height: 28px;
          border-radius: 15px;
          border: 1px solid h.$main-color;
          background: h.$color;
          color: h.$main-color;
          margin-top: 10px;
          &:hover {
            background: h.$main-color;
            color: h.$color;
            opacity: 0.5;
            cursor: pointer;
          }
        }
        .wave-top-right-more {
          font-size: 18px;
          height: 18px;
          width: 18px;
          position: relative;
          cursor: pointer;
          .icon-xiajiantou {
            border-radius: 50%;
            &:hover {
              color: h.$color;
              background: h.$main-color;
            }
          }

          .more-info {
            z-index: 20;
            position: absolute;
            left: -100px;
            background: h.$color;
            border-radius: 5px;
            width: 120px;
            overflow: hidden;
            box-shadow: 2px 2px 5px rgb(224, 224, 224),
              -2px -2px 5px rgb(224, 224, 224);
            .info-box {
              padding: 5px 0;
              .close {
                display: flex;
                justify-content: flex-end;
                font-size: 14px;
                padding: 5px 10px;
              }
              .more-list {
                width: 100%;
                .more-item {
                  border-top: 1px solid rgb(241, 241, 241);
                  text-align: center;
                  font-size: 14px;
                  padding: 5px 0;
                  &:hover {
                    background: h.$background-color;
                  }
                }
              }
            }
          }
        }
      }
    }
    .wave-content {
      margin-left: 60px;
      .wave-text {
        font-size: 14px;
        line-height: 1.5;
        padding: 0 10px;
        color: h.$title-one-color;
      }
    }

    .wave-footer {
      display: flex;
      height: 20px;
      padding-top: 10px;
      .footer-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .item-box {
          .comment-active {
            color: #f60 !important;
          }
          cursor: pointer;
          margin: 0 auto;
          color: h.$font-color;
          transition: all 0.5;
          .active_isfabul {
            color: #f60;
          }
          span {
            display: inline-block;
            line-height: 20px;
          }
          .icons {
            border-radius: 50%;
            &:hover {
              opacity: 0.7;
            }
          }
          &:hover {
            color: h.$main-color;
          }
          .iconfont {
            font-size: 20px;
            margin-right: 3px;
          }
          span {
            font-size: 12px;
            // transform: scale(0.5);
          }
        }
      }
    }
    .comment {
      width: 100%;
      margin-top: 20px;
      height: auto;
      border-top: 1px solid rgb(247, 247, 247);
      .publish-box {
        width: 100%;
        height: auto;
        margin-top: 10px;
        .publish-top {
          display: flex;
          justify-content: flex-start;
          .publish-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
            img {
              width: 100%;
              display: block;
              cursor: pointer;
              &:hover {
                filter: brightness(80%);
              }
            }
          }
          .publish-from {
            width: 100%;
            min-height: 28px !important;

            .input-box {
              width: 100%;
              min-height: 24px !important;
              .input-info {
                width: 100%;

                resize: none; //去掉右下角斜杠
                background: #f3f3f3;
                border: 1px solid #f3f3f3;
                border-radius: 10px;
                box-sizing: border-box;
                line-height: 24px;
                padding: 5px;
                overflow-x: hidden;
                overflow-y: hidden;
                font-family: "微软雅黑";
                font-size: 14px;
                &:focus {
                  outline: none;
                }
                &::placeholder {
                  color: #c1c1c1;
                }
              }
              .input-active {
                border: rgb(255, 123, 35) 1px solid !important;
                box-sizing: border-box;
                background: #fff;
              }
            }

            border: none;
          }
        }
        .publish-bt {
          width: 100%;
          height: 40px;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .bt-left {
            margin-left: 50px;
            position: relative;
            .EmotionButton {
              width: 30px;
              height: 30px;
              margin: 5px 0;
              display: inline-block;
              &:hover {
                background: rgba($color: #f60, $alpha: 0.2);
                i {
                  color: #f60;
                }
              }
              border-radius: 50%;
              .IconfontSize {
                cursor: pointer;
                font-size: 24px;
                margin: 3px;
                color: #999;
              }
            }
          }
          .bt-right {
            width: 60px;
            height: 32px;
            background: #f60;
            border-radius: 15px;
            margin-right: 30px;
            .right-button {
              width: 100%;
              height: 100%;
              button {
                width: 100%;
                height: 100%;
                display: inline-block;
                border: none;
                background: rgb(255, 158, 93);
                color: #fff;
                border-radius: 15px;
                font-weight: 600;
                font-size: 14px;
                cursor: pointer;
              }
            }
          }
        }
      }
      .comment-box {
        width: 100%;
        height: auto;
        border-top: 1px solid rgb(247, 247, 247);
        .comment-herder {
          width: 100%;
          margin-top: 10px;
          .active-span {
            color: #f60;
            font-weight: 700;
          }
          span {
            padding: 5px;
            cursor: pointer;
            display: inline-block;
            font-size: 13px;
            &:hover {
              color: #f60;
            }
          }
        }
        .comment-content {
          width: 100%;
          height: auto;
          .content-list {
            width: 100%;
            height: auto;
            .comment-item {
              width: 100%;
              height: auto;
              margin: 20px 0;
              font-size: 12px;
              .comment-one {
                display: flex;
                justify-content: flex-start;
                .comment-one-avatar {
                  width: 34px;
                  height: 34px;
                  border-radius: 50%;
                  margin-right: 10px;
                  overflow: hidden;
                  cursor: pointer;
                  img {
                    width: 100%;
                    height: 100%;
                    display: block;

                    &:hover {
                      filter: brightness(80%);
                    }
                  }
                }
                .comment-one-right {
                  width: 550px;
                  height: auto;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  .comment-one-right-top {
                    width: 100%;
                    .news {

                      .news-username {
                        cursor: pointer;
                        line-height: 25px;
                        color: #f60;
                        font-size: 12px;
                          transform: scale(0.833);
                        .athor {
                          font-size: 12px;
                          font-variant-caps: all-small-caps;
                          background: #f60;
                          color: #f3f3f3;
                          line-height: 16px;
                          display: inline-block;
                          border-radius: 3px;
                        }
                        @-moz-document url-prefix() {
                          //为了兼容火狐下font-variant-caps失效
                          .athor {
                            font-size: 8px !important;
                            background: #f60;
                            color: #f3f3f3;
                            line-height: 16px;
                            display: inline-block;
                            border-radius: 3px;
                          }
                        }
                      }
                      .news-text {
                        line-height: 20px;

                      }
                    }
                  }
                  .comment-one-right-bt {
                    width: 550px;
                    display: flex;
                    justify-content: space-between;
                    color: #999;
                    // .information {
                    // }
                    .operation {
                      span {
                        &:hover {
                          color: #f60;
                        }
                        cursor: pointer;
                      }
                      .active {
                        color: #f60;
                      }
                      .fab_num {
                        display: inline-block;
                        width: 25px;
                      }
                      .icon {
                        font-size: 15px;
                        padding-left: 5px;
                        padding-right: 5px;
                      }
                    }
                  }
                }
              }
              .comment-two {
                width: 100%;
                margin-top: 5px;
                .comment-two-reply {
                  margin-left: 44px;
                  width: 550px;
                  min-height: 20px;
                  .comment-two-reply-list {
                    width: 100%;
                    .comment-two-text {
                      width: 100%;
                      span {
                        &:nth-of-type(1) {
                          color: #eb7350;
                        }
                        text-align: center;
                        color: #333;
                        padding: 0 2px;
                        line-height: 18px;
                        font-size: 20px;
                        transform: scale(0.5);
                        /*transform-origin:left center*/
                        font-size: 10px;
                      }
                      .two-text-username {
                        cursor: pointer;
                      }
                      .two-text-un-username {
                        color: #eb7350;
                        cursor: pointer;
                      }
                    }

                  .comment-two-bottom{
                    width: 100%;
                    margin-top: 3px;

                     .comment-two-information {
                      width: 100%;
                     display: flex;
                    justify-content: space-between;
                    .comment-two-information-right{
                        span {

                       color: #999;
                      i {
                        font-size: 15px;
                        padding-left: 5px;
                        padding-right: 5px;
                        &:hover{
                          color: #f60;
                        }
                      }
                    }
                      .rep_fab_num{
                        display: inline-block;
                        width: 25px;
                      }
                    }

                  }
                  }
                   }

                }
                .comment-two-more {
                  margin-left: 45px;
                  margin-top: 5px;
                  width: 100%;
                  span {
                    font-size: 12px;
                    cursor: pointer;
                    padding-right: 10px;
                    color: #666;
                    &:nth-of-type(2) {
                      color: #1e88e5;
                      &:hover {
                        text-decoration: underline;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .comment-more {
          width: 100%;
          border-top: 1px solid rgb(247, 247, 247);
          text-align: center;
          padding-top: 15px;
          .more {
            span {
              cursor: pointer;
              font-size: 12px;
              color: #666;
              &:hover {
                color: #f60;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (min-width: 540px) and (max-width: 820px) {
    .waveitem {
      padding: 20px;
      .wave-top {
        display: flex;
        justify-content: space-between;
        .wave-top-left {
          display: flex;
          .avatar {
            width: 50px;
            height: 50px;
            display: block;
            position: relative;
            .user-avatar {
              width: 100%;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                display: block;
                height: 100%;
              object-fit: cover;
                cursor: pointer;
                &:hover {
                  filter: brightness(80%);
                }
              }
            }
            .user-flag {
              width: 15px;
              height: 15px;
              border-radius: 50%;
              display: block;
              overflow: hidden;
              position: absolute;
              bottom: 0;
              right: 0;
              img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
          }
          .information {
            margin-left: 10px;
            display: flex;

            flex-direction: column;
            justify-content: center;
            .information-box {
              display: block;
              .information-title {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 5px;
                cursor: pointer;
                &:hover {
                  color: #f60;
                }
              }
              .information-specific {
                font-size: 12px;
                color: h.$title-three-color;
                .lable {
                  margin-left: 10px;
                }
              }
            }
          }
        }

        .wave-top-right {
          display: flex;
          .wave-top-right-followed {
            font-size: 12px;
            display: block;
            width: 60px;
            height: 28px;
            border-radius: 15px;
            border: 1px solid #999;
            background: h.$color;
            color: #999;
            margin-top: 10px;
            cursor: not-allowed;
          }
          .wave-top-right-follow {
            font-size: 12px;
            display: block;
            width: 60px;
            height: 28px;
            border-radius: 15px;
            border: 1px solid h.$main-color;
            background: h.$color;
            color: h.$main-color;
            margin-top: 10px;
            &:hover {
              background: h.$main-color;
              color: h.$color;
              opacity: 0.5;
              cursor: pointer;
            }
          }
          .wave-top-right-more {
            font-size: 18px;
            height: 18px;
            width: 18px;
            position: relative;
            cursor: pointer;
            .icon-xiajiantou {
              border-radius: 50%;
              &:hover {
                color: h.$color;
                background: h.$main-color;
              }
            }

            .more-info {
              z-index: 20;
              position: absolute;
              left: -100px;
              background: h.$color;
              border-radius: 5px;
              width: 120px;
              overflow: hidden;
              box-shadow: 2px 2px 5px rgb(224, 224, 224),
                -2px -2px 5px rgb(224, 224, 224);
              .info-box {
                padding: 5px 0;
                .close {
                  display: flex;
                  justify-content: flex-end;
                  font-size: 14px;
                  padding: 5px 10px;
                }
                .more-list {
                  width: 100%;
                  .more-item {
                    border-top: 1px solid rgb(241, 241, 241);
                    text-align: center;
                    font-size: 14px;
                    padding: 5px 0;
                    &:hover {
                      background: h.$background-color;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .wave-content {
        margin-left: 60px;
        .wave-text {
          font-size: 14px;
          line-height: 1.5;
          padding: 0 10px;
          color: h.$title-one-color;
        }
      }

      .wave-footer {
        display: flex;
        height: 20px;
        padding-top: 10px;
        .footer-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .item-box {
            .comment-active {
              color: #f60 !important;
            }
            cursor: pointer;
            margin: 0 auto;
            color: h.$font-color;
            transition: all 0.5;
            .active_isfabul {
              color: #f60;
            }
            span {
              display: inline-block;
              line-height: 20px;
            }
            .icons {
              border-radius: 50%;
              &:hover {
                opacity: 0.7;
              }
            }
            &:hover {
              color: h.$main-color;
            }
            .iconfont {
              font-size: 20px;
              margin-right: 3px;
            }
            span {
              font-size: 12px;
              // transform: scale(0.5);
            }
          }
        }
      }
      .comment {
        width: 100%;
        margin-top: 20px;
        height: auto;
        border-top: 1px solid rgb(247, 247, 247);
        .publish-box {
          width: 100%;
          height: auto;
          margin-top: 10px;
          .publish-top {
            display: flex;
            justify-content: flex-start;
            .publish-avatar {
              width: 34px;
              height: 34px;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 15px;
              img {
                width: 100%;
                display: block;
                cursor: pointer;
                &:hover {
                  filter: brightness(80%);
                }
              }
            }
            .publish-from {
              width: 100%;
              min-height: 28px !important;

              .input-box {
                width: 100%;
                min-height: 24px !important;
                .input-info {
                  width: 100%;

                  resize: none; //去掉右下角斜杠
                  background: #f3f3f3;
                  border: 1px solid #f3f3f3;
                  border-radius: 10px;
                  box-sizing: border-box;
                  line-height: 24px;
                  padding: 5px;
                  overflow-x: hidden;
                  overflow-y: hidden;
                  font-family: "微软雅黑";
                  font-size: 14px;
                  &:focus {
                    outline: none;
                  }
                  &::placeholder {
                    color: #c1c1c1;
                  }
                }
                .input-active {
                  border: rgb(255, 123, 35) 1px solid !important;
                  box-sizing: border-box;
                  background: #fff;
                }
              }

              border: none;
            }
          }
          .publish-bt {
            width: 100%;
            height: 40px;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            .bt-left {
              margin-left: 50px;
              position: relative;
              .EmotionButton {
                width: 30px;
                height: 30px;
                margin: 5px 0;
                display: inline-block;
                &:hover {
                  background: rgba($color: #f60, $alpha: 0.2);
                  i {
                    color: #f60;
                  }
                }
                border-radius: 50%;
                .IconfontSize {
                  cursor: pointer;
                  font-size: 24px;
                  margin: 3px;
                  color: #999;
                }
              }
            }
            .bt-right {
              width: 60px;
              height: 32px;
              background: #f60;
              border-radius: 15px;
              margin-right: 30px;
              .right-button {
                width: 100%;
                height: 100%;
                button {
                  width: 100%;
                  height: 100%;
                  display: inline-block;
                  border: none;
                  background: rgb(255, 158, 93);
                  color: #fff;
                  border-radius: 15px;
                  font-weight: 600;
                  font-size: 14px;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .comment-box {
          width: 100%;
          height: auto;
          border-top: 1px solid rgb(247, 247, 247);
          .comment-herder {
            width: 100%;
            margin-top: 10px;
            .active-span {
              color: #f60;
              font-weight: 700;
            }
            span {
              padding: 5px;
              cursor: pointer;
              display: inline-block;
              font-size: 13px;
              &:hover {
                color: #f60;
              }
            }
          }
          .comment-content {
            width: 100%;
            height: auto;
            .content-list {
              width: 100%;
              height: auto;
              .comment-item {
                width: 100%;
                height: auto;
                margin: 20px 0;
                font-size: 12px;
                .comment-one {
                  display: flex;
                  justify-content: flex-start;
                  .comment-one-avatar {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    margin-right: 10px;
                    overflow: hidden;
                    cursor: pointer;
                    img {
                      width: 100%;
                      height: 100%;
                      display: block;

                      &:hover {
                        filter: brightness(80%);
                      }
                    }
                  }
                  .comment-one-right {
                    width: 7.3rem;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .comment-one-right-top {
                      width: 100%;
                      .news {

                        .news-username {
                          cursor: pointer;
                          line-height: 25px;
                          color: #f60;
                          font-size: 12px;
                          transform: scale(0.833);
                          .athor {
                             font-size: 12px;
                          transform: scale(0.833);
                             font-size: 12px;
                          transform: scale(0.833);
                            font-variant-caps: all-small-caps;
                            background: #f60;
                            color: #f3f3f3;
                            line-height: 16px;
                            display: inline-block;
                            border-radius: 3px;
                          }
                          @-moz-document url-prefix() {
                            //为了兼容火狐下font-variant-caps失效
                            .athor {
                              font-size: 8px !important;
                              background: #f60;
                              color: #f3f3f3;
                              line-height: 16px;
                              display: inline-block;
                              border-radius: 3px;
                            }
                          }
                        }
                        .news-text {
                          line-height: 20px;
                           font-size: 12px;
                          transform: scale(0.833);
                        }
                      }
                    }
                    .comment-one-right-bt {
                      width: 100%;
                      display: flex;
                      justify-content: space-between;
                      color: #999;
                      // .information {
                      // }
                      .operation {
                        span {
                          &:hover {
                            color: #f60;
                          }
                          cursor: pointer;
                        }
                        .active {
                          color: #f60;
                        }
                        .fab_num {
                          display: inline-block;
                          width: 25px;
                        }
                        .icon {
                          font-size: 15px;
                          padding-left: 5px;
                          padding-right: 5px;
                        }
                      }
                    }
                  }
                }
                .comment-two {
                   width: 100%;
                margin-top: 5px;
                .comment-two-reply {
                  margin-left: 44px;
                  width: 7.3rem;
                  min-height: 20px;
                  .comment-two-reply-list {
                    width: 100%;
                    .comment-two-text {
                      width: 100%;
                      span {
                        &:nth-of-type(1) {
                          color: #eb7350;
                        }
                        text-align: center;
                        color: #333;
                        padding: 0 2px;
                        line-height: 18px;
                        font-size: 20px;
                        transform: scale(0.5);
                        /*transform-origin:left center*/
                        font-size: 10px;
                      }
                      .two-text-username {
                        cursor: pointer;
                      }
                      .two-text-un-username {
                        color: #eb7350;
                        cursor: pointer;
                      }
                    }

                  .comment-two-bottom{
                    width: 100%;
                    margin-top: 3px;

                     .comment-two-information {
                      width: 100%;
                     display: flex;
                    justify-content: space-between;
                    .comment-two-information-right{
                        span {

                       color: #999;
                      i {
                        font-size: 15px;
                        padding-left: 5px;
                        padding-right: 5px;
                        &:hover{
                          color: #f60;
                        }
                      }
                    }
                      .rep_fab_num{
                        display: inline-block;
                        width: 25px;
                      }
                    }

                  }
                  }
                   }

                }
                .comment-two-more {
                  margin-left: 45px;
                  margin-top: 5px;
                  width: 100%;
                  span {
                    font-size: 12px;
                    cursor: pointer;
                    padding-right: 10px;
                    color: #666;
                    &:nth-of-type(2) {
                      color: #1e88e5;
                      &:hover {
                        text-decoration: underline;
                      }
                    }
                  }
                }

                }
              }
            }
          }
          .comment-more {
            width: 100%;
            border-top: 1px solid rgb(247, 247, 247);
            text-align: center;
            padding-top: 15px;
            .more {
              span {
                cursor: pointer;
                font-size: 12px;
                color: #666;
                &:hover {
                  color: #f60;
                }
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 540px) {
    .waveitem {
      padding: .45rem;
      .wave-top {
        display: flex;
        justify-content: space-between;
        .wave-top-left {
          display: flex;
          .avatar {
            width: 1.03rem;
            height: 1.03rem;
            display: block;
            position: relative;
            .user-avatar {
              width: 100%;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
              object-fit: cover;
                display: block;
                cursor: pointer;
                &:hover {
                  filter: brightness(80%);
                }
              }
            }
            .user-flag {
              width: 15px;
              height: 15px;
              border-radius: 50%;
              display: block;
              overflow: hidden;
              position: absolute;
              bottom: 0;
              right: 0;
              img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
          }
          .information {
            margin-left: 10px;
            display: flex;

            flex-direction: column;
            justify-content: center;
            .information-box {
              display: block;
              .information-title {
                font-size: 0.3rem;
                font-weight: bold;
                margin-bottom: 5px;
                cursor: pointer;
                &:hover {
                  color: #f60;
                }
              }
              .information-specific {
                font-size: 0.25rem;
                color: h.$title-three-color;
                .lable {
                  margin-left: 10px;
                  font-size: 0.25rem;
                }
              }
            }
          }
        }

        .wave-top-right {
          display: flex;
          .wave-top-right-followed {
            font-size: 0.25rem;
            display: block;
            width: 1.6rem;
            height: 0.6rem;
            border-radius: 15px;
            border: 1px solid #999;
            background: h.$color;
            color: #999;
            margin-top: 0.2rem;
            cursor: not-allowed;
          }
          .wave-top-right-follow {
            font-size: 0.25rem;
            display: block;
            width: 1.3rem;
            height: 0.6rem;
            border-radius: 15px;
            border: 1px solid h.$main-color;
            background: h.$color;
            color: h.$main-color;
            margin-top: 0.2rem;
            &:hover {
              background: h.$main-color;
              color: h.$color;
              opacity: 0.5;
              cursor: pointer;
            }
          }
          .wave-top-right-more {
            font-size: 0.38rem;
            height: 0.38rem;
            width: 0.38rem;
            position: relative;
            cursor: pointer;
            .icon-xiajiantou {
              border-radius: 50%;
              &:hover {
                color: h.$color;
                background: h.$main-color;
              }
            }

            .more-info {
              z-index: 20;
              position: absolute;
              left: -100px;
              background: h.$color;
              border-radius: 5px;
              width: 100px;
              overflow: hidden;
              box-shadow: 2px 2px 5px rgb(224, 224, 224),
                -2px -2px 5px rgb(224, 224, 224);
              .info-box {
                padding: 5px 0;
                .close {
                  display: flex;
                  justify-content: flex-end;
                  font-size: 14px;
                  padding: 5px 10px;
                }
                .more-list {
                  width: 100%;
                  .more-item {
                    border-top: 1px solid rgb(241, 241, 241);
                    text-align: center;
                    font-size: 0.3rem;
                    padding: 5px 0;
                    &:hover {
                      background: h.$background-color;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .wave-content {
        margin-left: 1.03rem;
        .wave-text {
          font-size: 0.3rem;
          line-height: 1.5;
          padding: 0 0.2rem;
          color: h.$title-one-color;
        }
      }

      .wave-footer {
        display: flex;
        height: 20px;
        padding-top: 0.2rem;
        .footer-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .item-box {
            .comment-active {
              color: #f60 !important;
            }
            cursor: pointer;
            margin: 0 auto;
            color: h.$font-color;
            transition: all 0.5;
            .active_isfabul {
              color: #f60;
            }
            span {
              display: inline-block;
              line-height: 20px;
            }
            .icons {
              border-radius: 50%;
              &:hover {
                opacity: 0.7;
              }
            }
            &:hover {
              color: h.$main-color;
            }
            .iconfont {
              font-size: 0.41rem;
              margin-right: 3px;
            }
            span {
              font-size: 0.25rem;
              // transform: scale(0.5);
            }
          }
        }
      }
      .comment {
        width: 100%;
        margin-top: 20px;
        height: auto;
        border-top: 1px solid rgb(247, 247, 247);
        .publish-box {
          width: 100%;
          height: auto;
          margin-top: 10px;
          .publish-top {
            display: flex;
            justify-content: flex-start;
            .publish-avatar {
              width: 34px;
              height: 34px;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 15px;
              img {
                width: 100%;
                display: block;
                cursor: pointer;
                &:hover {
                  filter: brightness(80%);
                }
              }
            }
            .publish-from {
              width: 100%;
              min-height: 0.6rem !important;

              .input-box {
                width: 100%;
                min-height: 0.5rem !important;
                .input-info {
                  width: 100%;

                  resize: none; //去掉右下角斜杠
                  background: #f3f3f3;
                  border: 1px solid #f3f3f3;
                  border-radius: 10px;
                  box-sizing: border-box;
                  line-height: 0.5rem;
                  padding: 5px;
                  overflow-x: hidden;
                  overflow-y: hidden;
                  font-family: "微软雅黑";
                  font-size: 14px;
                  &:focus {
                    outline: none;
                  }
                  &::placeholder {
                    color: #c1c1c1;
                  }
                }
                .input-active {
                  border: rgb(255, 123, 35) 1px solid !important;
                  box-sizing: border-box;
                  background: #fff;
                }
              }

              border: none;
            }
          }
          .publish-bt {
            width: 100%;
            height: 40px;
            padding-top: 0.2rem;
            display: flex;
            justify-content: space-between;
            .bt-left {
              margin-left: 50px;
              position: relative;
              .EmotionButton {
                width: 0.62rem;
                height: 0.62rem;
                margin: 5px 0;
                display: inline-block;
                &:hover {
                  background: rgba($color: #f60, $alpha: 0.2);
                  i {
                    color: #f60;
                  }
                }
                border-radius: 50%;
                .IconfontSize {
                  cursor: pointer;
                  font-size: 0.5rem;
                  margin: 3px;
                  color: #999;
                }
              }
            }
            .bt-right {
              width: 1.25rem;
              height: 0.66rem;
              background: #f60;
              border-radius: 15px;
              margin-right: 30px;
              .right-button {
                width: 100%;
                height: 100%;
                button {
                  width: 100%;
                  height: 100%;
                  display: inline-block;
                  border: none;
                  background: rgb(255, 158, 93);
                  color: #fff;
                  border-radius: 15px;
                  font-weight: 600;
                  font-size: 0.3rem;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .comment-box {
          width: 100%;
          height: auto;
          border-top: 1px solid rgb(247, 247, 247);
          .comment-herder {
            width: 100%;
            padding-top: 10px;

            .active-span {
              color: #f60;
              font-weight: 700;
            }
            span {
              padding: 5px;
              cursor: pointer;
              display: inline-block;
              font-size: 13px;
              &:hover {
                color: #f60;
              }
            }
          }
          .comment-content {
            width: 100%;
            height: auto;
            .content-list {
              width: 100%;
              height: auto;
              .comment-item {
                width: 100%;
                height: auto;
                padding: 0.22rem 0;
                margin: 0;
                font-size: 0.25rem;
                border-bottom: 0.02rem solid #f3f3f3;
                .comment-one {
                  display: flex;
                  justify-content: flex-start;
                  .comment-one-avatar {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    margin-right: 10px;
                    overflow: hidden;
                    cursor: pointer;
                    img {
                      width: 100%;
                      height: 100%;
                      display: block;

                      &:hover {
                        filter: brightness(80%);
                      }
                    }
                  }
                  .comment-one-right {
                    width: auto;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .comment-one-right-top {
                      width: 100%;
                      .news {
                        width:9rem;
                        text-align: start;
                        flex-wrap: wrap;
                        .news-username {
                          width: auto;
                          cursor: pointer;
                          line-height: .4rem;
                          font-size: .25rem;
                          transform: scale(0.833);
                            color: #f60;

                          .athor {
                            font-size: 12px;
                            font-variant-caps: all-small-caps;
                            background: #f60;
                            color: #f3f3f3;
                            line-height: 16px;
                            display: inline-block;
                            border-radius: 3px;
                          }
                          @-moz-document url-prefix() {
                            //为了兼容火狐下font-variant-caps失效
                            .athor {
                              font-size: 8px !important;
                              background: #f60;
                              color: #f3f3f3;
                              line-height: 16px;
                              display: inline-block;
                              border-radius: 3px;
                            }
                          }
                        }
                        .news-text {
                             vertical-align: baseline;
                          margin-top: .1rem;
                          font-size: .25rem;
                          line-height: .5rem;
                        }
                      }
                    }
                    .comment-one-right-bt {
                      width: 9rem;
                      display: flex;
                      justify-content: space-between;
                      color: #999;
                      .information {
                        width: 9rem;
                        .create-time {
                          width: 4rem;
                        }
                      }
                      .operation {
                        width: 2.1rem;
                        span {
                          &:hover {
                            color: #f60;
                          }
                          cursor: pointer;
                        }
                        .active {
                          color: #f60;
                        }
                        .fab_num {
                          display: inline-block;
                          width: 0.52rem;
                        }
                        .icon {
                          font-size: 0.311rem;
                          padding-left: 0.1rem;
                          padding-right: 0.1rem;
                        }
                      }
                    }
                  }
                }
                .comment-two {
                margin-top: 5px;
                .comment-two-reply {
                  margin-left: 44px;
                  width: 8.85rem;
                  min-height: 20px;
                  .comment-two-reply-list {
                    width: 100%;
                    .comment-two-text {
                      width: 100%;
                      span {
                        &:nth-of-type(1) {
                          color: #eb7350;
                        }
                        text-align: center;
                        color: #333;
                        padding: 0 2px;
                        line-height: 18px;
                        font-size: .4rem;
                        transform: scale(0.5);
                        /*transform-origin:left center*/
                        font-size: 10px;
                      }
                      .two-text-username {
                        cursor: pointer;
                      }
                      .two-text-un-username {
                        color: #eb7350;
                        cursor: pointer;
                      }
                    }

                  .comment-two-bottom{
                    width: 100%;
                    margin-top: 3px;

                     .comment-two-information {
                      width: 100%;
                     display: flex;
                    justify-content: space-between;
                    .comment-two-information-right{
                        span {

                       color: #999;
                      i {
                        font-size: 15px;
                        padding-left: 5px;
                        padding-right: 5px;
                        &:hover{
                          color: #f60;
                        }
                      }
                    }
                      .rep_fab_num{
                        display: inline-block;
                        width: 25px;
                      }
                    }

                  }
                  }
                   }

                }
                .comment-two-more {
                  margin-left: 44px;
                  margin-top: 5px;
                  width: 100%;
                  span {
                    font-size: .25rem;
                    cursor: pointer;
                    padding-right: .2rem;
                    color: #666;
                    &:nth-of-type(2) {
                      color: #1e88e5;
                      &:hover {
                        text-decoration: underline;
                      }
                    }
                  }
                }
              }
              }
            }
          }
          .comment-more {
            width: 100%;
            border-top: 1px solid rgb(247, 247, 247);
            text-align: center;
            padding-top: 15px;
            .more {
              span {
                cursor: pointer;
                font-size: 0.25rem;
                color: #666;
                &:hover {
                  color: #f60;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
